<template>
  <div class="css-mask">
    <div class="circle-filter"></div>

    <div class="css-mask-filter-container">
      <section>
        <p>原图</p>
        <img src="/public/img.png" alt="">
      </section>
      <section>
        <p>高斯模糊</p>
        <input-range class="width-100" v-model:value="value1" :max="20"/>
        <p>filter: blur({{ value1 }}px);</p>
        <img :style="`filter: blur(${ value1 }px);`" src="/public/img.png" alt="">
      </section>
      <section>
        <p>明亮度</p>
        <input-range class="width-100" v-model:value="value2" :max="200"/>
        <p>filter: brightness({{ value2 }}%);</p>
        <img :style="`filter: brightness(${ value2 }%);`" src="/public/img.png" alt="">
      </section>
      <section>
        <p>对比度</p>
        <input-range class="width-100" v-model:value="value3" :max="200"/>
        <p>filter: contrast({{ value3 }}%);</p>
        <img :style="`filter: contrast(${ value3 }%);`" src="/public/img.png" alt="">
      </section>
      <section>
        <p>图像灰度</p>
        <input-range class="width-100" v-model:value="value4"/>
        <p>filter: grayscale({{ value4 }}%);</p>
        <img :style="`filter: grayscale(${ value4 }%);`" src="/public/img.png" alt="">
      </section>
      <section>
        <p>反转输入图像</p>
        <input-range class="width-100" v-model:value="value5"/>
        <p>filter: invert({{ value5 }}%);</p>
        <img :style="`filter: invert(${ value5 }%);`" src="/public/img.png" alt="">
      </section>
      <section>
        <p>转化图像的透明程度</p>
        <input-range class="width-100" v-model:value="value6"/>
        <p>filter: opacity({{ value6 }}%);</p>
        <img :style="`filter: opacity(${ value6 }%);`" src="/public/img.png" alt="">
      </section>
      <section>
        <p>转换图像饱和度</p>
        <input-range class="width-100" v-model:value="value7" :max="200"/>
        <p>filter: saturate({{ value7 }}%);</p>
        <img :style="`filter: saturate(${ value7 }%);`" src="/public/img.png" alt="">
      </section>
      <section>
        <p>将图像转换为深褐色</p>
        <input-range class="width-100" v-model:value="value8"/>
        <p>filter: sepia({{ value8 }}%);</p>
        <img :style="`filter: sepia(${ value8 }%);`" src="/public/img.png" alt="">
      </section>
      <section>
        <p>对输入图像应用阴影效果</p>
        <div>
          <label>水平偏移</label>
          <input-range v-model:value="value9" :min="-260" :max="260"/>
        </div>
        <div>
          <label>垂直偏移</label>
          <input-range v-model:value="value10" :min="-150" :max="150"/>
        </div>
        <div>
          <label>模糊半径</label>
          <input-range v-model:value="value11" :max="50"/>
        </div>
        <p>filter: drop-shadow({{ value9 }}px {{ value10 }}px {{ value11 }}px);</p>
        <img :style="`filter: drop-shadow(${value9}px ${value10}px ${value11}px);`" src="/public/img.png" alt="">
      </section>
    </div>

  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import InputRange from "../components/input-range.vue";

const value1 = ref(6);
const value2 = ref(50);
const value3 = ref(50);
const value4 = ref(100);
const value5 = ref(80);
const value6 = ref(50);
const value7 = ref(50);
const value8 = ref(50);

const value9 = ref(10);
const value10 = ref(10);
const value11 = ref(10);
</script>

<style scoped>
.width-100 {
  width: 100%;
}

.css-mask-filter-container {
  display: flex;
  flex-wrap: wrap;
}

.css-mask-filter-container img {
  width: 200px;
}

.css-mask-filter-container section {
  margin-right: 16px;
}

.circle-filter {
  height: 300px;
  filter: contrast(3000%);
  position: relative;
  background: #fff;
}

.circle-filter:before {
  position: absolute;
  filter: blur(12px);
  content: "";
  display: inline-block;
  height: 200px;
  width: 200px;
  background-color: #000;
  border-radius: 100px;
}

.circle-filter:after {
  position: absolute;
  filter: blur(12px);
  left: 20px;
  content: "";
  display: inline-block;
  height: 200px;
  width: 200px;
  background-color: #000;
  border-radius: 100px;

  animation-name: css-mask-move;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes css-mask-move {
  from {
    left: 20px;
  }
  to {
    left: 220px;
  }
}
</style>
